<template>
    <div>
        <h1>卡券编辑</h1>
        <table class="table">
            <tr>
                <td>卡券名称</td>
                <td>
                    <input type="text" v-model="data.kname">
                </td>
            </tr>

            <tr>
                <td>卡券类型</td>
                <td>
                    <select v-model="data.tid">
                        <option value="0">请选择卡券类型</option>
                        <option v-for="d in lx" :value="d.tid">{{ d.tname }}</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>适用范围</td>
                <td>
                    <select v-model="data.fid">
                        <option value="0">请选择适用范围</option>
                        <option v-for="d in fw" :value="d.fid">{{ d.fname }}</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>适用日期</td>
                <td>
                    <span v-for="d in rq1">
                        <input type="checkbox" v-model="rq2" :value="d">{{ d }}
                    </span>
                    
                </td>
            </tr>

            <tr>
                <td>有效期</td>
                <td>
                    <input type="text" placeholder="有效期" v-model="data.yxq">
                </td>
            </tr>

            <tr>
                <td>价格</td>
                <td>
                    <input type="text" v-model="data.price">
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <select v-model="data.sid">
                        <option value="0">请选择状态</option>
                        <option v-for="d in zt" :value="d.sid">{{ d.sname }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input type="file" @change="addimg">
                    <img :src="'https://localhost:7098/'+data.imgUrl" style="width: 60px;height: 60px;">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="编辑" class="btn btn-success" @click="upd">
                </td>
            </tr>
        </table>
        <a href="/">返回首页</a>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import{ref,onMounted, pushScopeId} from 'vue'
import { useRouter,useRoute } from 'vue-router';
const router=useRouter()
const route=useRoute()

onMounted(()=>{
    bang1()
    bang2()
    bang3()
    getid()
})

//绑定类型
const lx=ref({})
const bang1=()=>{
    axios.get("/api/Kq/GetKtypes").then(res=>{
        lx.value=res.data
    })
}
//绑定范围
const fw=ref({})
const bang2=()=>{
    axios.get("/api/Kq/GetKfws").then(res=>{
        fw.value=res.data
    })
}
//绑定状态
const zt=ref({})
const bang3=()=>{
    axios.get("/api/Kq/GetKstarts").then(res=>{
        zt.value=res.data
    })
}
const data=ref(
    {
  "kid": 0,
  "kname": "string",
  "tid": 0,
  "fid": 0,
  "kdate": "string",
  "yxq": "string",
  "price": 0,
  "sid": 0,
  "start": true,
  "imgUrl": "string",
  "isdelete": true
}
)
//根据主键id获取信息
const getid=()=>{
    axios.get("/api/Kq/GetId",{params:{id:route.query.id}}).then(res=>{
        data.value=res.data
        rq2.value=data.value.kdate.split(",")
    })
}
//日期
const rq1=ref(['周一','周二','周三','周四','周五','周六','周日','法定节假日'])
const rq2=ref([])
//文件上传
const addimg=(a:any)=>{
    var f=a.target.files[0];
    var fs=new FormData();
    fs.append("file",f);
    debugger
    if(f.size>1024*1024){
        alert('文件大小不能超过1MB');
        return;
    }

    if(f.type!="image/jpeg" && f.type!="image/png" && f.type!="image/gif"){
        alert('文件格式只能是jpeg,png,gif');
        return;
    }
    axios.post("/api/Kq/GetImg",fs).then(res=>{
        data.value.imgUrl=res.data
    })
}
//修改
const upd=()=>{
    data.value.kdate=rq2.value.toString()
    axios.post("/api/Kq/UpdKq",data.value).then(res=>{
        if(res.data>0){
            alert("更新成功");
            router.push("/")
        }
        else{
            alert("更新失败");
            return;
        }
    })
}
</script>

<style scoped>

</style>